<template>
  <div class="animal-categories" :style="{ '--category-color': categoryInfo[categoryId].color }">
    <!-- 页面头部 -->
    <header class="category-header">
      <button class="back-button" @click="goBackHome">🏠 返回主页</button>
      <h1 class="category-title">
        {{ categoryInfo[categoryId].icon }} {{ categoryInfo[categoryId].name }}
      </h1>
      <p class="category-subtitle">探索这些可爱的小动物们</p>
    </header>

    <!-- 动物列表 -->
    <section class="animals-list">
      <div class="animals-grid">
        <div 
          v-for="animal in currentAnimals" 
          :key="animal.id"
          class="animal-card"
          @click="navigateToAnimalDetail(animal.id)"
        >
          <div class="animal-image-container">
            <img 
              :src="animal.imageUrl"
              :alt="animal.name"
              class="animal-image"
            >
          </div>
          <div class="animal-info">
            <h3 class="animal-name">{{ animal.name }}</h3>
            <p class="animal-description">{{ animal.shortDescription }}</p>
            <div class="animal-meta">
              <span class="animal-classification">
                {{ animal.classification }}
              </span>
              <div class="animal-likes">
                <span class="like-icon">❤️</span>
                <span class="like-count">{{ animal.likes }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 装饰元素 -->
    <div class="decorative-elements">
      <div class="floating-icon">🐾</div>
      <div class="floating-icon">🌟</div>
      <div class="floating-icon">🦄</div>
    </div>

    <!-- 页脚 -->
    <footer class="category-footer">
      <p>继续探索更多可爱的动物世界吧！</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 当前分类ID
const categoryId = ref(route.params.categoryId || 'cute')

// 按分类组织的动物数据
const animalsByCategory = ref({
  cute: [
    { id: 102, name: '小奶猫', imageUrl: 'https://img95.699pic.com/photo/60041/9389.jpg_wh860.jpg', shortDescription: '活泼可爱的小奶猫，喜欢玩耍和撒娇。', classification: '哺乳动物', likes: 1280 },
    { id: 101, name: '金毛犬', imageUrl: 'https://img95.699pic.com/photo/60045/5295.jpg_wh860.jpg', shortDescription: '温顺友善的金毛犬，是人类的好朋友。', classification: '哺乳动物', likes: 2560 },
    { id: 103, name: '兔子', imageUrl: 'https://img95.699pic.com/photo/60012/2922.jpg_wh860.jpg', shortDescription: '毛茸茸的小兔子，喜欢吃胡萝卜。', classification: '哺乳动物', likes: 1890 },
    { id: 104, name: '仓鼠', imageUrl: 'https://img95.699pic.com/photo/60048/7232.jpg_wh860.jpg', shortDescription: '小小的仓鼠，活泼好动很可爱。', classification: '哺乳动物', likes: 1420 }
  ],
  wild: [
    { id: 5, name: '狮子', imageUrl: 'https://picb5.photophoto.cn/13/789/13789445_1.jpg', shortDescription: '草原之王，威风凛凛的大型猫科动物。', classification: '哺乳动物', likes: 3240 },
    { id: 6, name: '大象', imageUrl: 'https://wallpaperm.cmcm.com/d03bb52719cf142af53e8b131ed61567.jpg', shortDescription: '陆地上最大的哺乳动物，聪明且有情感。', classification: '哺乳动物', likes: 2890 },
    { id: 7, name: '长颈鹿', imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.b4eaf37fb401de10e781096707a686e6?rik=x8CxTI8JTWaZuQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50131%2f6506.jpg_wh1200.jpg&ehk=FitwelJva%2f%2bS3cMnjXUuy4WCZ%2ftvTBIOUcjSfBg2%2bYs%3d&risl=&pid=ImgRaw&r=0', shortDescription: '拥有超长脖子的温和巨人。', classification: '哺乳动物', likes: 2150 },
    { id: 8, name: '老虎', imageUrl: 'https://img95.699pic.com/photo/60017/7350.jpg_wh860.jpg', shortDescription: '森林中的独行侠，美丽而危险。', classification: '哺乳动物', likes: 3560 }
  ],
  marine: [
    { id: 9, name: '海豚', imageUrl: 'https://img95.699pic.com/photo/60070/4125.jpg_wh860.jpg', shortDescription: '聪明友善的海洋精灵，喜欢跳跃和玩耍。', classification: '海洋生物', likes: 2980 },
    { id: 10, name: '海龟', imageUrl: 'https://img95.699pic.com/photo/60026/4848.jpg_wh860.jpg', shortDescription: '长寿的海洋爬行动物，在海洋中自由穿梭。', classification: '海洋生物', likes: 2340 },
    { id: 11, name: '热带鱼', imageUrl: 'https://img95.699pic.com/photo/60047/2433.jpg_wh860.jpg', shortDescription: '色彩斑斓的热带鱼，为海洋增添活力。', classification: '海洋生物', likes: 1890 },
    { id: 12, name: '鲸鱼', imageUrl: 'https://img95.699pic.com/photo/60065/9109.jpg_wh860.jpg', shortDescription: '海洋中的庞然大物，声音嘹亮传千里。', classification: '海洋生物', likes: 3120 }
  ],
  birds: [
    { id: 13, name: '鹦鹉', imageUrl: 'https://img95.699pic.com/photo/60030/2214.jpg_wh860.jpg', shortDescription: '色彩鲜艳、能言善道的鸟类。', classification: '鸟类', likes: 1760 },
    { id: 14, name: '企鹅', imageUrl: 'https://img95.699pic.com/photo/60069/7426.jpg_wh860.jpg', shortDescription: '不会飞但擅长游泳的可爱鸟类。', classification: '鸟类', likes: 2450 },
    { id: 15, name: '孔雀', imageUrl: 'https://img95.699pic.com/photo/60023/4059.jpg_wh860.jpg', shortDescription: '拥有美丽尾羽的骄傲鸟类。', classification: '鸟类', likes: 2890 },
    { id: 16, name: '猫头鹰', imageUrl: 'https://img95.699pic.com/photo/60089/4384.jpg_wh860.jpg', shortDescription: '夜晚的猎手，拥有锐利的目光。', classification: '鸟类', likes: 2120 }
  ],
  exotic: [
    { id: 1, name: '大熊猫', imageUrl: 'https://img95.699pic.com/photo/50644/6272.jpg_wh860.jpg', shortDescription: '中国国宝，憨态可掬的珍稀动物。', classification: '哺乳动物', likes: 4120 },
    { id: 17, name: '树袋熊', imageUrl: 'https://img95.699pic.com/photo/60069/6761.jpg_wh860.jpg', shortDescription: '澳大利亚特有，喜欢睡觉和吃桉树叶。', classification: '哺乳动物', likes: 3560 },
    { id: 19, name: '考拉', imageUrl: 'https://imgs.699pic.com/images/600/502/307.jpg!detail.v1', shortDescription: '可爱的有袋类动物，总是挂在树上。', classification: '哺乳动物', likes: 2980 },
    { id: 18, name: '红熊猫', imageUrl: 'https://img95.699pic.com/photo/50329/0098.jpg_wh860.jpg', shortDescription: '像小熊猫一样可爱的珍稀动物。', classification: '哺乳动物', likes: 3240 }
  ]
})

// 分类名称和图标
const categoryInfo = ref({
  cute: { name: '超萌宠物', icon: '🐶🐱', color: '#FF9EAA' },
  wild: { name: '野生动物', icon: '🦁🐯', color: '#FFD77C' },
  marine: { name: '海洋生物', icon: '🐬🐠', color: '#8AC4D0' },
  birds: { name: '可爱鸟类', icon: '🐦🦜', color: '#B8E1FF' },
  exotic: { name: '珍稀动物', icon: '🐼🐨', color: '#A8D8EA' }
})

// 当前分类的动物
const currentAnimals = ref([])

// 加载当前分类的动物
onMounted(() => {
  currentAnimals.value = animalsByCategory.value[categoryId.value] || animalsByCategory.value.cute
})

// 监听路由参数变化
watch(() => route.params.categoryId, (newCategoryId) => {
  if (newCategoryId) {
    categoryId.value = newCategoryId
    currentAnimals.value = animalsByCategory.value[categoryId.value] || animalsByCategory.value.cute
  }
})

// 导航到动物详情页
const navigateToAnimalDetail = (animalId) => {
  router.push({
    path: `/animal/${animalId}`,
    query: { category: categoryId.value }
  })
}

// 返回主页
const goBackHome = () => {
  router.push('/')
}
</script>

<style scoped>
:root {
  --category-color: #FF9EAA;
}

.animal-categories {
  min-height: 100vh;
  background-color: #f9f9f9;
  padding-bottom: 2rem;
}

/* 页面头部 */
.category-header {
  background: linear-gradient(135deg, var(--category-color) 0%, #FF4081 100%);
  color: white;
  padding: 2rem 1rem;
  text-align: center;
  position: relative;
}

.back-button {
  position: absolute;
  left: 1rem;
  top: 1rem;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.category-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.category-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

/* 动物列表 */
.animals-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.animals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.animal-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.animal-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.animal-image-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.animal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.animal-card:hover .animal-image {
  transform: scale(1.05);
}

.animal-info {
  padding: 1.5rem;
}

.animal-name {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 0.75rem;
}

.animal-description {
  color: #666;
  line-height: 1.4;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.animal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}

.animal-classification {
  font-size: 0.85rem;
  color: var(--category-color);
  font-weight: 500;
}

.animal-likes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #999;
}

.like-icon {
  color: #FF6B6B;
}

.like-count {
  font-weight: 500;
}

/* 装饰元素 */
.decorative-elements {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.floating-icon {
  position: absolute;
  font-size: 2rem;
  opacity: 0.1;
  animation: float 20s infinite ease-in-out;
}

.floating-icon:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.floating-icon:nth-child(2) {
  top: 60%;
  right: 15%;
  animation-delay: 5s;
}

.floating-icon:nth-child(3) {
  bottom: 10%;
  left: 30%;
  animation-delay: 10s;
}

@keyframes float {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(10px, -20px) rotate(5deg); }
  50% { transform: translate(0, 10px) rotate(0deg); }
  75% { transform: translate(-10px, -10px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* 页脚 */
.category-footer {
  text-align: center;
  padding: 2rem 1rem;
  color: #666;
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .animals-grid {
    grid-template-columns: 1fr;
  }
  
  .category-title {
    font-size: 1.5rem;
  }
  
  .animal-card {
    max-width: 320px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .back-button {
    position: relative;
    left: auto;
    top: auto;
    margin-bottom: 1rem;
  }
  
  .category-header {
    padding: 1.5rem 1rem;
  }
  
  .animals-list {
    padding: 1rem;
  }
}
</style>